﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>视频监控</title>
    <link rel="stylesheet" href="css/base.css">
    <link href="css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
    <!-- 添加hk样式 -->
    <style>
        .plugin {
            width: 900px;
            height: 600px;
            margin: 10px auto;
        }

        .btnControl {
            display: flex;
            flex-direction: column;
            width: 325px;
            margin: 20px 0px;
            gap: 10px;
        }

        .conbtn,
        .zoombtn {
            height: 30px;
            width: 50px;
            background-color: #555555;
            font-size: 14px;
            color: #fff;
            cursor: pointer;
        }
    </style>
</head>

<body>


    <!--顶部-->
    <header class="header left">
        <div class="left nav">
            <ul>
                <li><i class="nav_1"></i><a href="index.html">使用情况概览</a> </li>
                <li class="nav_active"><i class="nav_2"></i><a href="carContrl.html">视频监控</a> </li>
                <li><i class="nav_3"></i><a href="map.html">报警管理</a> </li>



            </ul>
        </div>
        <div class="header_center left">
            <h2><strong>智慧灯杆管理平台</strong></h2>
            <p class="color_font"><small>Comprehensive service platform for smart tourism</small></p>
        </div>
        <div class="right nav text_right">
            <ul>
                <li><i class="nav_7"></i><a href="static.html">环境监测</a> </li>
                <li><i class="nav_8"></i><a href="message.html">广告投放</a> </li>
                <li><i class="nav_4"></i><a href="table2.html">灯杆管理</a> </li>
            </ul>
        </div>
        <!--<nav class="left nav">-->
        <!--<ul>-->
        <!--<li class="nav_active"><i class="nav_1"></i><a href="index.html">使用情况概览</a> </li>-->
        <!--<li><i class="nav_2"></i><a href="carContrl.html">车辆监控</a> </li>-->
        <!--<li><i class="nav_3"></i><a href="map.html">报警管理</a> </li>-->
        <!--<li><i class="nav_4"></i><a href="javascript:void(0)">灯杆管理</a><ul class="li_ul">-->
        <!--<li><a href="table2.html">表格一</a> </li>-->
        <!--<li><a href="table2.html">表格二</a> </li>-->

        <!--</ul> </li>-->
        <!--&lt;!&ndash;<li><i class="nav_5"></i><a href="#">车载视频</a> </li>&ndash;&gt;-->
        <!--&lt;!&ndash;<li><i class="nav_6"></i><a href="#">视频监控</a> </li>&ndash;&gt;-->
        <!--<li><i class="nav_7"></i><a href="static.html">环境监测</a> </li>-->
        <!--<li><i class="nav_8"></i><a href="message.html">广告投放</a> </li>-->
        <!--</ul>-->
        <!--</nav>-->
    </header>
    <!--内容部分-->
    <div class="con1 left" id="car_control">
        <div class="left car_left">
            <div class="left_up bow_shadow">
                <p>
                    <input type="text" placeholder="输入地点名" class="carNo_input"><input type="button" class="find_but" />
                </p>

                <p class="set_list"><i class="list_i"></i> 设备列表：</p>
                <p>
                <ul id="treeDemo" class="ztree"></ul>
                </p>
            </div>
            <div class="left_down bow_shadow">
                <div class="text_center"><a href="javascript:void (0)" class="tab_a tab_aActive">基本信息</a><a
                        href="javascript:void (0)" class="tab_a">历史回看</a> </div>
                <div class="car_content">
                    <p><span>所在街道：</span><span>丁字沽街道</span></p>
                    <p><span>实时监控</span>：</span><span>正常运行</span></p>
                    <p><span>当前时间</span>：</span><span>19:09</span></p>
                    <p><span>异常情况：</span><span>暂无异常</span></p>
                    <!-- <p><span>所属公司：</span><span>K89076xxxxxxxxxxxxxxxxxx</span></p>
            <p><span>行驶里程：</span><span>xxxxx</span></p>
            <p><span>状态：</span><span>xxxxx</span></p>
            <p><span>所在位置：</span><span>xxxxxxxxxxxxx</span></p> -->
                </div>
            </div>
        </div>
        <div class="left car_center">
            <!-- <video controls="controls" ></video>
            <video controls="controls" class="magin_left"></video>
            <video controls="controls" class="magin_top"></video>
            <video controls="controls" class="magin_top magin_left"></video> -->
            <!-- 添加hk监控视频 -->
            <div id="divPlugin" class="plugin"></div>

        </div>
        <div class="btnControl right car_right" style="display: flex;margin-left: 100px;">
            <div class="static_top" style="color:#fff">云台控制</div>
            <div>
                <input type="button" class="conbtn btnLT" value="左上" />
                <input type="button" class="conbtn btnT" value="上" />
                <input type="button" class="conbtn btnRT" value="右上" />
            </div>
            <div>
                <input type="button" class="conbtn btnL" value="左" />
                <input type="button" class="conbtn btnR" value="右" />
            </div>
            <div> <input type="button" class="conbtn btnLB" value="左下" />
                <input type="button" class="conbtn btnB" value="下" />
                <input type="button" class="conbtn btnRB" value="右下" />
            </div>
            <div>
                <button class="zoombtn zoomadd">变倍+</button>
                <button class="zoombtn zoomdec">变倍-</button>
            </div>
        </div>
        <!-- <div class="right car_right" id="map"></div> -->



    </div>
    <script src="js/jquery/jQuery-2.2.0.min.js"></script>
    <script src="js/echarts-all.js"></script>
    <script src="js/base.js"></script>
    <script type="text/javascript"
        src="http://api.map.baidu.com/api?v=2.0&ak=5ieMMexWmzB9jivTq6oCRX9j&callback"></script>
    <script src="js/car_control.js"></script>
    <script src="js/ztree/jquery.ztree.all-3.5.js"></script>
    <script src="js/listTree.js"></script>
    <!-- 添加依赖库 -->
    <script src="./lib/jquery-1.7.1.min.js"></script>
    <script src="./codebase/encryption/AES.js"></script>
    <script src="./codebase/encryption/cryptico.min.js"></script>
    <!-- <script src="../codebase/encryption/encryption.js"></script> -->
    <script src="./codebase/encryption/crypto-3.1.2.min.js"></script>
    <script id="videonode" src="./codebase/webVideoCtrl.js"></script>
    <script src="./js/demo.js"></script>
    <script>
        const szIP = '192.168.1.204', szUsername = 'admin', szPassword = '1qaz2wsx';
        // plugin init
        $(function () {
            const webVideo = new WebVideo();
            webVideo.init(
                szIP,
                szUsername,
                szPassword
            )
            webVideo.clickLogin()
            // 云台移动
            $('.conbtn').each(function () {
                let me = $(this);
                me.mouseup(function () {
                    webVideo.mouseUpPTZControl()
                })
            })
            $('.btnLT').mousedown(function () {
                webVideo.mouseDownPTZControl(5)
            })
            $('.btnT').mousedown(function () {
                webVideo.mouseDownPTZControl(1)
            })
            $('.btnRT').mousedown(function () {
                webVideo.mouseDownPTZControl(7)
            })
            $('.btnL').mousedown(function () {
                webVideo.mouseDownPTZControl(3)
            })
            $('.btnR').mousedown(function () {
                webVideo.mouseDownPTZControl(4)
            })
            $('.btnLB').mousedown(function () {
                webVideo.mouseDownPTZControl(6)
            })
            $('.btnB').mousedown(function () {
                webVideo.mouseDownPTZControl(2)
            })
            $('.btnRB').mousedown(function () {
                webVideo.mouseDownPTZControl(8)
            })
            //云台变倍
            $('.zoombtn').each(function () {
                let me = $(this);
                me.mouseup(function () {
                    webVideo.PTZZoomStop()
                })
            })
            $('.zoomadd').mousedown(function () {
                webVideo.PTZZoomIn()
            })
            $('.zoomdec').mousedown(function () {
                webVideo.PTZZoomout()
            })
        });
    </script>
</body>

</html>